<template>
  <!-- 标题 -->
  <h4 class="text-center">用户管理</h4>

  <!-- 用户列表 -->
  <table class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>头衔</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in userlist" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.position }}</td>
        <td>
          <!-- <router-link :to="'/home/users/' + item.id">详情</router-link> -->
          <button class="oper-btn" @click="handleDetail(item)">详情</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'MyUser',
  data() {
    return {
      // 用户列表数据
      userlist: [
        { id: 1, name: '嬴政', age: 18, position: '始皇帝' },
        { id: 2, name: '李斯', age: 35, position: '丞相' },
        { id: 3, name: '吕不韦', age: 50, position: '商人' },
        { id: 4, name: '赵姬', age: 48, position: '王太后' },
      ],
    }
  },
  methods: {
    // 查看详情
    handleDetail(user) {
      // this.$router.push({
      //   name: 'userDetails',
      //   params: {
      //     id: user.id,
      //   },
      // })
      // 以上等价于
      this.$router.push(`/home/users/${user.id}`)
    },
  },
}
</script>

<style lang="less" scoped>
.oper-btn {
  background-color: #35a5d1;
  border-radius: 3px;
  border: 0;
  color: #fff;
}
</style>